import { View, Text, StyleSheet, FlatList, Image, TouchableOpacity } from 'react-native'
import React, {useState, useEffect} from 'react'
import api from '../config.js'

let ss = StyleSheet.create({
  product: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 18,
    color: '#333',
  },
  price: {
    fontSize: 20,
    fontWeight:'bold',
    color: 'red',
  }
})

export default function ProductList({navigation}) { 
  //状态数据 —— 分页器
  let [pager, setPager] = useState({
    pno: 0,   //当前加载到哪一页数据了
    data: [], //当前已经加载到的商品数据
  })

  //加载下一页数据，调用场合：
  //①组件挂载时 
  //②滚动到页面底部 
  //③顶部下拉刷新
  function loadNextPageData(){
    let pno = pager.pno + 1 //即将向服务器请求的页号
    let url = api.productList + '?pno=' + pno
    //console.log(url)
    fetch(url)
    .then(res=>res.json())
    .then(body=>{
      //console.log(body)   分页器：{pno:2,pageCount:5,data:[...]}
      //setPager(body)   //错误写法！必须把新拿到的商品，拼接到已经查询到的商品尾部
      body.data = [...pager.data, ...body.data]   //老数据后拼接上新数据
      //body.data = pager.data.concat(body.data)
      setPager(body)
    })
    .catch(err=>{
      console.log(err)
    })
  }
  useEffect(()=>{
    //当前组件挂载时执行的方法
    //①组件挂载时，异步请求服务器端数据
    loadNextPageData()
  },[])

  function _renderItem( {item, index} ){  //item就是此次要循环处理的数据，index是该数据对象在指定数组中的下标
    //返回一个需要渲染出来的列表项
    return (
      <TouchableOpacity activeOpacity={0.6} style={ss.product} onPress={()=>navigation.navigate('pdetails', {pid:item.lid})}>
        <Image style={{width:100,height:100, margin:4}} source={{uri:api.base + item.pic}}/>
        <View style={{justifyContent:'space-between', flex:1}}>
          <Text style={ss.title} numberOfLines={2}>{item.title}</Text>
          <Text style={ss.price}>￥{item.price}</Text>
        </View>
      </TouchableOpacity>
    )
  }
  return (
    //FlatList：高性能的长列表组件；常用属性   
    //data：列表中要渲染的数据
    //renderItem：指定需要渲染的每一个列表项的内容
    <View>
      <FlatList 
        data={pager.data}
        renderItem={_renderItem}
      />
    </View>
  )
}